// 全局样式
.home-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

// 顶部导航栏样式
.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 50px;
	height: 60px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid #ccc;

	.nav-title {
		font-size: 24px;
		color: #333;
		margin: 0;
	}

	.list {
		display: flex;
		gap: 30px;

		a {
			text-decoration: none;
			color: #666;
			font-size: 16px;
			transition: color 0.3s;

			&:hover {
				color: #f60;
			}
		}
	}
}

// 主要内容区域样式
.main-content {
	display: flex;
	flex: 1;
}

// 左侧菜单样式
.menu {
	width: 200px;
	background: #f8f8f8;
	padding: 20px 0;
	border-right: 1px solid #eee;
	height: calc(100vh - 60px); // 减去导航栏的高度
	box-sizing: border-box;

	.menu-list {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			padding: 12px 24px;
			color: #333;
			cursor: pointer;
			transition: all 0.3s;

			&:hover {
				background: #f1f1f1;
				color: #f60;
			}
		}
	}
}

// 内容区域样式
.content {
	flex: 1;
	padding: 20px;
	background: #fff;
	height: calc(100vh - 60px); // 减去导航栏的高度
	overflow-y: auto; // 内容过多时可滚动
	box-sizing: border-box;
}